<div data-dojo-attach-point="topframe" class="pentaho-rounded-panel pentaho-tooltip-background pentaho-padding-sm pentaho-shadow" style="width:234px;">
    <table style="width:100%;heightx:270px" border="0">
        <tr>
            <td style="width:100%;">
            <td>
            <td style="width:16px; text-align: right">
                <div data-dojo-attach-point="closeBtn" class="cursorPointer closeIcon" />
            <td>
        </tr>
    </table>
    <div class="dialog-content pentaho-padding-sm flex-column gap-none" style="heightx:400px">
        <table style="width:100%;heightx:270px" border="0">
            <tr>
                <td class="label" data-dojo-attach-point="currentLbl" style="width:50%">
                    Current
                </td>
                <td style="heightx:15px; width:50%">
                    <div class="colorboxOuter" style="width:100%">
                        <div data-dojo-attach-point="currentColor" class="colorbox" stylex="width:100%" style="background-color:none">&nbsp;</div>
                    </div>
                </td>
            </tr>
        </table>
        <div data-dojo-attach-point="tabset" data-dojo-type="pentaho.common.TabSet" style="width:100%;height:23px;display:block">
        </div> 
        <div data-dojo-attach-point="colorpickertabs" data-dojo-typex="dijit.layout.StackContainer" class="colorpickertabs tabpanel" isLayoutContainer="true" tabStrip="true">
            <div data-dojo-attach-point="palettetab" data-dojo-typex="dijit.layout.ContentPane" selected="true" style="heightx: 210px; padding: 0px; overflow:hidden;" class="palettetab">
                <div class="flex-column gap-none" style="height:218px; width:218px;">
                    <table style="width:100%;height:100%" role="presentation">
                        <tr>    
                            <td style="text-align:center">
                                <div data-dojo-attach-point="palette" data-dojo-type="dijit.ColorPalette" class="flex-row flex-wrap gap-none">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div data-dojo-attach-point="customtab" data-dojo-typex="dijit.layout.ContentPane" selected="false" style="height: 230px; padding: 0px; overflow:hidden;" class="hidden">
                <div class="flex-column gap-none" style="height:230px; width:180px; padding: 4px 20px; position: absolute; left: 15px">
                    <div data-dojo-type="pentaho.common.CustomColorPicker" data-dojo-attach-point="colorPicker" showPreview="false" showHsv="false" webSafe="false" style="height:220px">
                    </div>
                </div>
            </div>
        </div>
        <table border="0" cellpadding="0" cellspacing="0" style="padding:0px">
            <tr>
                <td style="padding-top: 4px">
                    <span class="label" data-dojo-attach-point="inUseLbl">In Use</span>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; heightx:20px; padding-left: 2px">
                    <table data-dojo-attach-point="colorTable" class="usedColorTable" cellspacing="2">
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>    